<!-- 工作台 =》 工单管理(管理员) =》 工单监控-->
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="工单监控" @goBack="goBack">
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="header-bar">
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.count }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue"
          left-icon="" action-text="重置"
          right-icon="search" placeholder="请输入站点名称"
          @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <view class="task-list-container"  v-if="taskList.length > 0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model="isLoading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadMore"
          >
          <!-- 列表循环   -->
          <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
            <view class="task-title">
              <view class="task-title-main">
                <img src="../../../static/img/light.png" alt="">
                <text class="task-title-main-text">{{ item.NAME }}</text>
              </view>
              <text class="task-status" :class="color(item.TASK_STATE)">
                <text>{{item.TASK_STATE_NAME}}</text>
              </text>
            </view>
            <hr class="task-hr">
            <view class="top-task-main">
              <text class="task-big-ltitle">工单类型:</text>
              <text class="task-small-ltitle">{{ item.TASK_TYPE_NAME }}</text>
            </view>
            <view class="top-task-main">
              <text class="task-big-ltitle">巡视站点:</text>
              <text class="task-small-ltitle">{{ item.TASK_SITE_NAME }}</text>
            </view>
            <view class="top-task-main" v-if="item.TASK_STATE !== '1'">
              <text class="task-big-ltitle">巡视负责人：</text>
              <text class="task-small-ltitle" v-if="item.TASK_STATE !== '1'">{{ item.XSFZR }}</text>
            </view>
            <view class="top-task-main" v-if="item.TASK_STATE !== '1'">
              <text class="task-big-ltitle">计划巡视时间:</text>
              <text class="task-small-ltitle">{{ item.JHXSKSSJS }}～{{item.JHXSJSSJS}}</text>
            </view>
          </view>
          </van-list>
        </van-pull-refresh>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup
      :type-list="typeList"
      :showScreen="showScreen"
      @closePopup="showScreen=false"
      @confirm="confirmCondition">
    <!-- v-if="roleAuth === 'SUPERMANAGE' || roleAuth === 'MANAGE'" -->
      <view class="screen-type-item" v-if="['SUPERMANAGE', 'MANAGE_PROVINCE', 'DISPATCH_PROVINCE'].includes(roleAuth)">
        <plateTitle title="所属单位" :isRequired="false" class="plate-title"/>
        <view class="screen-option-container">
          <van-field>
            <template #input>
              <div style="width: 100%; height: 380px; display: flex; flex-direction: column;justify-content: space-around;">
                <van-checkbox v-model="allChecked" :label-disabled="true" @click.native="checkAll" shape="square">全选</van-checkbox>
                <van-checkbox
                  v-for="(item, index) in conditionGroup"
                  v-model="item.isChecked"
                  :name="item.orgId"
                  shape="square"
                  :key="index"
                  :label-disabled="true"
                  @change="changeConditionCompany($event, item)"
                >{{ item.name }}</van-checkbox>
              </div>
            </template>
          </van-field>
        </view>
      </view>
    </screenPopup>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../../../components/common/screenPopup";
import plateTitle from '../../../components/business/plateTitle.vue';
import {mapGetters} from "vuex";
import moment from "moment";

let taskStatistics = [
  { // 全部
    apiKeys: 'QB',
    count: 0,
    title: '全部',
    isSelected: false,
  },
  { // 未完成
    apiKeys: 'WWC',
    count: 0,
    title: '未完成',
    isSelected: false,
  },
  { // 已完成
    apiKeys: 'YWC',
    count: 0,
    title: '已完成',
    isSelected: false,
  }
]

let taskStateMap = {
  "QB": "",
  "WWC": "0",
  "YWC": "1"
}

export default {
  name: "taskMonitor",
  components: {navBar, screenPopup, searchEquMatch, plateTitle},
  data() {
    return {
      searchValue: "",
      showScreen: false,
      showSearch: false,
      taskList: [],
      color: (TASK_STATE) => {
        if (TASK_STATE === "1") return "blue";
        if (TASK_STATE === "2") return "red";
        if (TASK_STATE === "3") return "yellow";
        if (TASK_STATE === "99") return "green";
      },
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
      current:0,
      typeList: [],
      menuList: taskStatistics,
      taskType:'',// 右侧筛选工单类型
      user:'MANAGE',
      taskStae:'', // 工单状态 "0"-未完成  "1"-已完成  ""-全部
      conditionGroup: [], // 所属单位筛选
      allChecked: true, // 单位筛选全选
    };
  },
  onLoad(options) {
    // 首页跳转至此页，携带默认tab信息
    if(options.taskStatistics) {
      let option = JSON.parse(options.taskStatistics);
      for(let i in option) {
        option[i].isSelected && (this.current = +i) && (this.taskStae = taskStateMap[option[i].apiKeys]);
      }
    }

    // 如果用户身份为管理，则需要展示单位筛选
    if (['SUPERMANAGE', 'MANAGE_PROVINCE', 'DISPATCH_PROVINCE'].includes(this.roleAuth)) {
      this.getOrgSelectList();
    }
    this.getTaskListByAdminT();
  },
  computed:{
    ...mapGetters(['userData', 'roleAuth']),
  },
  methods: {
    checkAll () {
      this.conditionGroup.map(item => {
        item.isChecked = !this.allChecked;
        return item
      })
    },
    changeConditionCompany (event, conditionItem) {
      if (!event) { // 未选中，全选重置false
        this.allChecked = false;
      } else {
        for (let i = 0; i < this.conditionGroup.length; i++) {
          if (!this.conditionGroup[i].isChecked) {
            this.allChecked = false;

            return;
          }
        }
        this.allChecked = true;
      }
    },
    chooseMenu(item, index) {
      this.current = index
      this.taskStae = taskStateMap[item.apiKeys]
      this.onRefresh()
    },
    getOrgSelectList () {
      this.$api.getOrgSelectList({roleId: this.userData.roleId, orgId: this.userData.orgId})
        .then(res => {
          this.conditionGroup = res.data.map(item => {
            item.isChecked = true;
            return item;
          });
        })
    },
    // 获取列表
    getTaskListByAdminT() {
      const params = {
        limit: this.limit,
        page: this.page,
        site_name: this.searchValue,
        task_type: this.taskType,
        task_state: this.taskStae,
        batchId: this.userData.batchId,
        roleId: this.userData.roleId,
        userId: this.userData.userId,
        orgId: this.userData.orgId,
        orgList: this.conditionGroup.filter(item => item.isChecked).map(item => item.orgId)
      }
      let typeList = []
      this.$api.getTaskListByAdmin(params)
        .then(res => {
          this.isLoading = false;
          this.refreshing = false;
          this.taskList = this.taskList.concat(res.data.taskList.map(item => {
            return{
              JHXSKSSJS:item.JHXSKSSJ ? moment(item.JHXSKSSJ).format('YYYY-MM-DD HH:mm') : '',
              JHXSJSSJS: item.JHXSJSSJ ? moment(item.JHXSJSSJ).format('YYYY-MM-DD  HH:mm') : '',
              ...item
            }
          }));
          this.total = res.data.total_number
          // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有

          // 上侧统计部分
          this.menuList = this.menuList.map(item => {
            item.count = res.data[item.apiKeys]
            return item;
          })
          if (!this.typeList.length) {
            typeList.push({
              title:'工单类型',
              optionList: res.data.task_type.map(item => {
                !item.VALUE ? (item.VALUE = '') : null;
                return item
              }),
              type:'TASK_TYPE_NAME'
            })
            // typeList.push({
            //   title:'工单状态',
            //   optionList: res.data.task_state.map(item => {
            //     !item.VALUE ? (item.VALUE = '') : null;
            //     return item
            //   }),
            //   type:'TASK_STATE_NAME'
            // })
            this.typeList = typeList
          }
        })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskListByAdminT();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getTaskListByAdminT();
      } else {
        this.finished = true;
      }
    },
    confirmCondition(selected) {
      this.taskType = selected.TASK_TYPE_NAME == '0' ? "" : selected.TASK_TYPE_NAME
      this.onRefresh()
      // if(selected.TASK_STATE_NAME == '0' && selected.TASK_TYPE_NAME == '0') {
      //   this.taskType = ''
      //   this.taskStae = ''
      //   this.onRefresh()
      // }else if(selected.TASK_STATE_NAME == '0' && selected.TASK_TYPE_NAME !== '0') {
      //   this.taskStae = ''
      //   this.taskType = selected.TASK_TYPE_NAME
      //   this.onRefresh()
      // }else if(selected.TASK_TYPE_NAME == '0' && selected.TASK_STATE_NAME !== '0') {
      //   this.taskType = ''
      //   this.taskStae = selected.TASK_STATE_NAME
      //   this.onRefresh()
      // } else {
      //   this.taskType = selected.TASK_TYPE_NAME
      //   this.taskStae = selected.TASK_STATE_NAME
      //   this.onRefresh()
      // }
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    screen() {
      this.showScreen = true;
    },
    jump(item) {
      console.log(item)
      let timeDate = item.JHXSKSSJS +'-'+item.JHXSJSSJS
      if(item.TASK_TYPE === '1' && item.TASK_STATE !=='1'){
        uni.navigateTo({
          url: `/pages/workBench/tourTask/taskMonitor/taskMonitor?taskState=${item.TASK_STATE}&objId=${item.OBJ_ID}&taskStateName=${item.TASK_STATE_NAME}&user=${this.user}`
        })
      }else if(item.TASK_STATE === '1') {
        uni.navigateTo({
          url: `/pages/workBench/taskMonitor/taskDetail?name=${item.NAME}&siteName=${item.TASK_SITE_NAME}&timeDate=${timeDate}&fzrName=${item.XSFZR}`
        })
      }else if(item.TASK_TYPE === '2' && item.TASK_STATE !=='1') {
        uni.navigateTo({
          url: `/pages/workBench/temporaryTask/taskMonitor/taskMonitor?taskState=${item.TASK_STATE}&objId=${item.OBJ_ID}&taskStateName=${item.TASK_STATE_NAME}&user=${this.user}`
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;

  .header {
    position: sticky;
    top: 0;
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .header-bar {
    height: px2vh(120);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(130);
    .menu {
      width: px2vw(1020);
      height: px2vh(220);
      background-image: url('../../../static/img/borderR.png');
      background-size: px2vw(1020) px2vh(220);
      //margin-left: px2vw(30);
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      li {
        //width: calc(1 * (100% - #{px2vw(400)}) / 4);
        height: 100%;
        //margin-left: px2vw(80);
        //float: left;
        position: relative;
        .right-box {
          height: px2vh(112);
          //margin-left:px2vw(10);
          float: left;
          margin-top: px2vh(59);
          text-align: center;
          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }
          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }
          .selectmenu {
            color: #417ADC;
          }
        }
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: px2vh(-34);
          //right: px2vw(40);
          left: 50%;
          transform: translateX(-50%);
          background-image: url('../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }

  .main-container {
    height: calc(100vh - #{px2vh(413)});
    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(443)} - 38px);
      overflow: auto;

      .task-list {
        width: px2vw(1020);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        padding-bottom: px2vh(30);
        margin: 0 px2vw(30) px2vh(30) px2vw(30);

        .task-title {
          width: px2vw(940);
          height: px2vh(80);
          margin-left: px2vw(40);
          padding-top: px2vw(30);
          margin-bottom: px2vh(30);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .task-title-main {
            display: flex;
            align-items: center;
            img {
              width: px2vw(64);
              height: px2vw(64);
            }
          }

          .task-title-main-text {
            width: px2vw(700);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: px2vw(20);
            font-size: px2vh(48);
          }

          .task-status {
            width: px2vw(123);
            height: px2vh(50);
            border-radius: px2vw(10);
            font-size: px2vw(32);
            text-align: center;
          }

          .task-status.blue {
            color: #417ADC;
            background: #E4ECFA;
          }

          .task-status.red {
            color: #FF7070;
            background: rgba(255, 112, 112, 0.1);
          }

          .task-status.yellow {
            color: #FFAD0E;
            background: rgba(255, 180, 0, 0.1);
          }

          .task-status.green {
            color: #3CDA68;
            background: rgba(62, 218, 104, 0.1);
          }
        }

        .task-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
          margin-bottom: px2vh(42);
        }

        .top-task-main {
          width: px2vw(900);
          font-size: px2vh(36);
          line-height: px2vh(62);
          margin-left: px2vw(60);

          .task-big-ltitle, .task-big-rtitle {
            color: #666;
          }

          .task-small-ltitle, .task-small-rtitle {
            margin-left: px2vw(25);
            color: #333;
          }

          .task-big-rtitle {
            margin-left: px2vw(245);
          }
        }
      }
    }
  }
}

</style>
